<template>
  <div>
    <!--    展示所有解决方案信息表格-->
    <el-table :data="tableData" border stripe :header-cell-style="{backgroundColor: '#F2F2E6'}">
      <el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
      <el-table-column align="center" prop="nickname" label="用户昵称" width="100"></el-table-column>
      <el-table-column align="center" prop="profilepic" label="头像">
        <template slot-scope="scope">
          <v-avatar style="margin-right: 1vw; cursor: pointer"
                    :size="40">
            <img :src="scope.row.profilepic" alt="">
          </v-avatar>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="detail" label="内容" width="150">
        <template slot-scope="scope">
          <a-button style="color: cornflowerblue" @click="view(scope.row.profilepic)">查看<a-icon type="eye" /></a-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-popconfirm
            style="margin-left: 8px"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="#a27e7e"
            title="确定打回吗？"
            @confirm="back(scope.row)"
          >
            <a-button style="color: indianred" slot="reference">打回<a-icon type="logout" /></a-button>
          </el-popconfirm>
          <el-popconfirm
            style="margin-left: 8px"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="#a27e7e"
            title="确定审核通过吗？"
            @confirm="pass(scope.row)"
          >
            <a-button style="color: cornflowerblue" slot="reference">通过<a-icon type="check-circle" /></a-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="头像大图" :visible.sync="viewDialogVis" width="60%" >
      <div style="text-align: center">
        <img :src="avatar" width="400"/>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "avatar_check",
  data(){
    return{
      tableData: [], //表格数据
      total: 0, //总数
      pageNum: 1, //当前页
      pageSize: 5, //每页条数
      viewDialogVis: false,
      avatar: '',
    }
  },
  created() {
    this.load()
  },
  methods:{
    view(avatar) { //查看详细内容
      this.avatar = avatar
      this.viewDialogVis = true
    },

    handleSizeChange(pageSize) { //更改每页条数
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) { //翻页
      this.pageNum = pageNum
      this.load()
    },

    load() { // 请求分页查询
      request.get("/user/getAvatars").then(res => {
        if (res.data !== null) {
          this.tableData = res.data.list
          this.total = res.data.total
        } else {
          this.tableData=[]
        }
      })
    },

    back(user) { //打回
      request.get('/user/unPublishAvatar',{
        params: {
          id: user.id,
          url: user.profilepic
        }
      }).then(res => {
        if(res.code === '200') {
          let message = {}
          message.userId = user.id
          message.content = '您的头像存在违规内容，未能通过审核（如有疑问请联系管理员289812618@qq.com）'
          message.statement = '未读'
          request.post('/message',message).then(res => {
            if(res.code === '200') {
              this.sendSuccessMessage('已通知用户')
            } else {
              this.sendWarnMessage('通知用户失败')
            }
          })
          this.sendSuccessMessage('打回成功')
          this.load()
        } else {
          this.sendWarnMessage('打回失败')
        }
      })
    },

    pass(user) { //审核通过
      request.get('/user/publishAvatar',{
        params: {
          id: user.id,
          url: user.profilepic
        }
      }).then(res => {
        if(res.code === '200') {
          let message = {}
          message.userId = user.id
          message.content = '您的头像已成功通过审核'
          message.statement = '未读'
          request.post('/message',message).then(res => {
            if(res.code === '200') {
              this.sendSuccessMessage('已通知用户')
            } else {
              this.sendWarnMessage('通知用户失败')
            }
          })
          this.sendSuccessMessage('审核通过')
          this.load()
        } else {
          this.sendWarnMessage('通过失败')
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
